<template>
    <div>
      <!-- 物料选择对话框 -->
      <el-dialog v-model="props.selectWUliaoDialog" title="物料选择" @close="closeDialogWl" width="80%">
        <el-row>
          <el-col>
            <el-form :inline="true">
              <el-form-item label="物资编码">
                <el-input v-model="params.materialProductCode" placeholder="请输入产品物料编码"></el-input>
              </el-form-item>
              <el-form-item label="物资名称">
                <el-input v-model="params.materialProductName" placeholder="请输入产品物料名称"></el-input>
              </el-form-item>
              <el-form-item label="批次号">
                <el-input v-model="params.inboundBatchNumber" placeholder="请输入入库批次号"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true">
              <el-form-item label="仓库名称">
                <el-input v-model="params.warehouseName" placeholder="请输入仓库"></el-input>
              </el-form-item>
              <el-form-item label="供应商编号">
                <el-input v-model="params.supplierCode" placeholder="请输入供应商编号"></el-input>
              </el-form-item>
              <el-form-item label="供应商名称">
                <el-input v-model="params.supplierName" placeholder="请输入供应商名称"></el-input>
              </el-form-item>
              <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
              <el-button type="primary" plain @click="paramsReset" :icon="Refresh">重置</el-button>
            </el-form>
            <el-table style="width: 100%" :data="salesorder">
              <el-table-column label="产品物料编码" width="200px" show-overflow-tooltip>
                <template #default="scope">
                  <el-radio v-model="selectedRowId" :label="scope.row.materialProductId" @change="selectRow(scope.row)">
                    <span>{{ scope.row.materialProductCode }}</span>
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="materialProductName" label="产品物料名称" width="120"></el-table-column>
              <el-table-column prop="specificationAndModel" label="规格型号" width="120"></el-table-column>
              <el-table-column prop="inventoryQuantity" label="在库数量" width="120"></el-table-column>
              <el-table-column prop="unitName" label="单位" width="120"></el-table-column>
              <el-table-column prop="inboundBatchNumber" label="入库批次号" width="120"></el-table-column>
              <el-table-column prop="warehouseName" label="仓库" width="120"></el-table-column>
              <el-table-column prop="warehouseAreaName" label="库区" width="120"></el-table-column>
              <el-table-column prop="warehouseLocationName" label="库位" width="120"></el-table-column>
              <el-table-column prop="supplierCode" label="供应商编号" width="120"></el-table-column>
              <el-table-column prop="supplierName" label="供应商名称" width="120"></el-table-column>
              <el-table-column prop="productionOrder" label="生产工单" width="120"></el-table-column>
              <el-table-column prop="indate" label="入库日期" width="120"></el-table-column>
              <el-table-column prop="validityPeriodOfInventory" label="库存有效期" width="120"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 分页组件 -->
        <el-row>
          <el-col :span="24">
            <div class="demo-pagination-block">
              <el-pagination :current-page="params.currentPage" :page-size="params.pageSize" background :default-page-size="params.pageSize" :page-sizes="pageSizes" layout="total,sizes,prev,pager,next,jumper" :total="pageResult.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <template #footer>
          <div style="display: flex; justify-content: center;">
            <el-button type="primary" @click="confirmWUliao">确认</el-button>
            <el-button @click="cancelWUliao">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, defineProps, defineEmits } from 'vue';
  import { Search, Refresh } from '@element-plus/icons-vue';
  import { findStock } from '@/apis/xms/index';
  import { ElNotification } from 'element-plus';
  
  const props = defineProps(['selectWUliaoDialog']);// 接收props
  const emit = defineEmits(['close-dialog', 'rowDataA']);// 定义事件
  
  const rowDataA = ref({});// 选中行的数据
  const selectedRowId = ref(null);// 选中行的ID
  
  const selectRow = (row) => {// 选择行
    console.log('选中的行数据：', row);
    selectedRowId.value = row.materialProductId;// 选中行的ID
    rowDataA.value = row;// 选中行的数据
  };
  
  const params = reactive({// 搜索条件
    currentPage: 1,
    pageSize: 10,
    materialProductCode: '',
    materialProductName: '',
    inboundBatchNumber: '',
    warehouseName: '',
    supplierCode: '',
    supplierName: '',
    validityPeriodOfInventory: '',
  });
  
  let defaultParams = reactive({ ...params });// 默认参数
  
  const pageResult = ref({});// 分页数据
  const salesorder = ref([]);// 列表数据
  
  const confirmWUliao = () => {// 确认选择
    if (selectedRowId.value) {// 判断是否选择了数据
      emit('rowDataA', rowDataA.value);// 发送选择的行数据
      closeDialogWl();// 关闭弹窗
    } else {
      ElNotification.warning({
        title: '提示',
        message: '请至少选择一条数据！',
        type: 'warning',
      });
    }
  };
  
  const loadList = async () => {// 加载列表数据
    pageResult.value = await findStock(params);
    salesorder.value = pageResult.value.records;// 列表数据
  };
  
  const pageSizes = [10, 20, 30, 40, 50];// 页码大小
  
  const handleSizeChange = async (size) => {// 页码切换
    params.pageSize = size;
    await loadList();
  };
  
  const handleCurrentChange = async (currentPage) => {// 页码切换
    params.currentPage = currentPage;
    await loadList();
  };
  
  const handleSearch = async () => {// 搜索
    await loadList();
  };
  
  const paramsReset = async () => {// 重置
    Object.assign(params, defaultParams);
    await loadList();
  };
  
  const closeDialogWl = () => {// 关闭弹窗
    emit('close-dialog');
  };
  
  const cancelWUliao = () => {// 取消选择
    closeDialogWl();
  };
  
  loadList();
  </script>
  
  <style scoped>
  .demo-pagination-block .el-pagination {
    justify-content: end;
    margin-top: 20px;
  }
  </style>